import React, { useState } from'react';
import { images } from './imageData.js';



const ImageSwitcher = () => {
   const onChange = (currentSlide) => {
    console.log(currentSlide);
  };
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isImageFocused, setIsImageFocused] = useState(false);

  const handlePrevClick = () => {
    setCurrentIndex(prevIndex => prevIndex === 0? images.length - 1 : prevIndex - 1);
  };

  const handleNextClick = () => {
    setCurrentIndex(prevIndex => prevIndex === images.length - 1? 0 : prevIndex + 1);
  };

  const handleImageBlur = () => {
    setIsImageFocused(false);
    // 这里可以添加失去焦点时的其他逻辑，比如暂停动画等
  };

  const handleImageFocus = () => {
    setIsImageFocused(true);
  };

  return (
    
    <div className="image - switcher">
      <button onClick={handlePrevClick}>上一张</button>
      <img
        src={images[currentIndex]}
        alt={`图片 ${currentIndex + 1}`}
        onBlur={handleImageBlur}
        onFocus={handleImageFocus}
      />
      <button onClick={handleNextClick}>下一张</button>
    </div>
  );
};

export default ImageSwitcher;